<template>
  <view>
    <u-toast ref="uToastRef"></u-toast>
    <view class="museum-image">
      <custom-swiper :list="museum.images.split(';')"></custom-swiper>
    </view>
    <view class="museum-name">{{ museum.name }}</view>
    <view class="museum-address">地址：{{ museum.address }}</view>
    <view class="museum-introduce">
      <u-read-more ref="uReadMoreRef" :toggle="true" custom-style="height: 1200px" fontSize="20px">
        <u-parse class="parse" :content="museum.introduce" @load="load"></u-parse>
      </u-read-more>
    </view>

    <view style="margin-bottom: 50px"></view>
    <view class="operation-item">
      <view class="button">
        <u-button type="error" text="预约" shape="circle" @click="show = true"></u-button>
      </view>
    </view>
    <up-calendar :show="show" @confirm="onConfirm"></up-calendar>
    <u-modal
        :show="showModel"
        title="是否预约"
        show-cancel-button
        @cancel="showModel = false"
        @confirm="book"
        ref="uModal"
        :asyncClose="true">
      <view>请确认是否预约？</view>
    </u-modal>
  </view>
</template>

<script setup lang="ts">
import {computed, ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import type {BookReq, Museum} from "@/interfaces/museum";
import {useCreateOrderApi} from "@/services/api";
import {useStore} from "vuex";


const uReadMoreRef = ref()
const uToastRef = ref()
const store = useStore()
const show = ref<boolean>(false)
const showModel = ref<boolean>(false)
const userId = computed(() => store.getters["auth/getUserId"])
const museum = ref<Museum>({
  id: 0,
  cardImage: "",
  name: "",
  address: "",
  introduce: '',
  images: '',
  status: 0,
})
const bookData = ref<BookReq>({
  orderDate: '',
  museumId: 0,
  userId: ''
})
const onConfirm = (e: string[]) => {
  bookData.value.orderDate = e[0]
  showModel.value = true
}
const book = async () => {
  bookData.value.userId = userId.value
  try {
    await useCreateOrderApi(bookData.value)
    uToastRef.value.show({
      message: '预约成功',
      type: 'success',
      complete: () => {
        uni.navigateBack()
      }
    })
  } finally {
    showModel.value = false
    show.value = false
  }


}
const load = () => {
  uReadMoreRef.value.init()
}


onLoad((query) => {
  museum.value.id = query?.id
  bookData.value.museumId = query?.id
  museum.value.cardImage = query?.cardImage
  museum.value.images = query?.images
  museum.value.name = query?.name
  museum.value.address = query?.address
  museum.value.status = query?.status
  museum.value.introduce = query?.introduce
})
</script>


<style scoped lang="scss">
.operation-item {
  width: 100%;
  height: 30px;
  position: fixed;
  bottom: 3%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  .button {
    width: 90%;
  }
}

.museum-name {
  padding: 12px 24px;
  font-size: 24px;
  font-weight: bold;
}

.museum-address {
  padding: 12px 24px;
  font-size: 18px;
  color: #999999;
}

.museum-introduce {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 24px;
}
</style>
